<template>
  <view class="container">
    <!-- 显示宠物信息 -->
    <scroll-view v-if="petList.length > 0">
      <view class="pet-block" v-for="(pet, index) in petList" :key="index">
        <view class="pet-info" @click="toPetInfo(pet.pet_id)">
          <view class="pet-name">{{ truncateName(pet.pet_name) }}</view>
          <view class="pet-breed">{{ pet.breed }}</view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 显示提示信息 -->
    <view v-else>
      <view class="no-pet-info">没有宠物信息</view>
    </view>
    
    <!-- 添加宠物按钮 -->
    <view @click="showAddPetDialog" class="add-pet-button">
      添加宠物
    </view>
    
    <!-- 弹窗遮罩层 -->
    <view v-show="showDialog" class="dialog-mask" @click="cancelAddPet"></view>
    
    <!-- 弹窗 -->
    <view v-show="showDialog" class="dialog">
      <!-- 取消按钮 -->
      <view @click="cancelAddPet" class="cancel-button">×</view>
      <!-- 宠物信息表单 -->
      <form @submit.prevent="addPet">
        <view class="form-item">
          <input type="text" v-model="newPet.pet_name" placeholder="宠物名称" class="input-field">
        </view>
        <view class="form-item">
          <input type="text" v-model="newPet.breed" placeholder="宠物品种" class="input-field">
        </view>
        <view class="form-item">
          <input type="text" v-model="newPet.description" placeholder="宠物描述" class="input-field">
        </view>
        <button type="submit" class="submit-button" @click="addPet()">提交</button>
      </form>
    </view>
  </view>
</template>


<script>
import config from '@/config/config.js'; // 引入全局配置文件
export default {
  data() {
    return {
      petList: [], // 用户宠物列表
      showDialog: false, // 控制弹窗显示
      newPet: { pet_name: '', breed: '', description: '' }, // 新宠物信息
    };
  },
  methods: {
    async getList() {
      try {
        const res = uni.getStorageSync('userInfo');
        const user_id = res.user_id;
        const response = await uni.request({
          url: config.baseURL + `/pets/getbyuserid/${user_id}`,
          method: 'GET'
        });
        this.petList = response[1].data.data;
      } catch (err) {
        console.error('获取用户信息失败:', err);
      }
    },
    // 显示添加宠物弹窗
    showAddPetDialog() {
      this.showDialog = true;
    },
    // 取消添加宠物
    cancelAddPet() {
      this.showDialog = false; // 关闭弹窗
      this.newPet = { pet_name: '', breed: '', description: '' }; // 清空表单数据
    },
    // 提交添加宠物信息
    async addPet() {
      if (!this.newPet.pet_name || !this.newPet.breed || !this.newPet.description) {
        uni.showToast({
          title: '请填写完整宠物信息',
          icon: 'none'
        });
        return;
      }
      const pet = this.newPet;
      Object.assign(pet, { user_id: uni.getStorageSync('userInfo').user_id });
      try {
        const response = await uni.request({
          url: config.baseURL + '/pets/add',
          method: 'POST',
          data: pet
        });
        console.log('新增宠物信息成功', response[1].data);
        this.reList(); // 刷新数据
        this.showDialog = false; // 关闭弹窗
        this.newPet = { pet_name: '', breed: '', description: '' }; // 清空表单数据
        uni.showToast({
          title: '添加成功',
          icon: 'success'
        });
      } catch (err) {
        console.error('新增宠物信息失败', err);
        uni.showToast({
          title: '添加失败',
          icon: 'none'
        });
      }
    },
    // 获取随机颜色
    getRandomColor() {
      return '#' + Math.floor(Math.random() * 16777215).toString(16);
    },
    // 字符串截断
    truncateName(name) {
      return name.length > 5 ? name.slice(0, 5) + '...' : name;
    },
    reList() {
      this.getList();
    },
    toPetInfo(pet_id) {
      uni.navigateTo({
        url: '/pages/mypets/pet_detail/pet_detail?pet_id=' + pet_id
      });
    }
  },
  mounted() {
    this.getList();
  }
};
</script>


<style scoped>
.container {
  padding: 20px;
  position: relative;
}

.pet-block {
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc; /* 添加浅灰色原边框底 */
}

.pet-info {
  display: flex;
  justify-content: space-between;
}

.pet-name {
  font-size: 18px;
  font-weight: bold;
  max-width: 60%; /* 名字最大占比60% */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pet-breed {
  color: #666;
  font-size: 16px;
}

.add-pet-button {
  background-color: rgb(0,122,255);
  width: 80%;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border-radius: 10px;
  cursor: pointer;
  position: fixed;
  bottom: 10rpx;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
}

.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 30px; /* 调整弹窗内边距 */
  width: 90%; /* 弹窗宽度90% */
  height: 40%; /* 弹窗高度70% */
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.cancel-button {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  z-index: 1000;
}

.form-item {
  margin-bottom: 20px;
}

.input-field {
  width: calc(100% - 20px); /* 调整输入框宽度，减去左右内边距 */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
}

.submit-button {
  background-color: #1aad19;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  outline: none;
}

.no-pet-info {
  padding: 20px;
  text-align: center;
  font-size: 16px;
  color: #666;
}
</style>
